<template>
  <div class="search-container">
    <div class="price-filter-section">
      <span class="price-label">价格范围：</span>
      <el-input
        v-model="minPrice"
        placeholder="最低"
        size="small"
        class="price-input"
        type="number"
        min="0"
      >
      </el-input>
      <span class="price-separator">-</span>
      <el-input
        v-model="maxPrice"
        placeholder="最高"
        size="small"
        class="price-input"
        type="number"
        min="0"
      >
      </el-input>
      <el-button
        size="small"
        type="success"
        icon="el-icon-refresh"
        @click="clearFilters"
        class="clear-button"
        >清空筛选</el-button
      >
    </div>
    <div class="search-section">
      <el-input
        @keyup.enter.native="searchClick"
        placeholder="通过商品名搜索..."
        prefix-icon="el-icon-search"
        size="small"
        v-model="keywords"
        class="search-input"
      >
      </el-input>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="searchClick"
        class="search-button"
        >搜索</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  data() {
    return {
      keywords: "",
      minPrice: "",
      maxPrice: ""
    };
  },
  methods: {
    searchClick() {
      this.$emit("onSearch", {
        keyword: this.keywords,
        minPrice: this.minPrice ? parseFloat(this.minPrice) : null,
        maxPrice: this.maxPrice ? parseFloat(this.maxPrice) : null
      });
    },
    clearFilters() {
      this.keywords = "";
      this.minPrice = "";
      this.maxPrice = "";
      this.$emit("onSearch", {
        keyword: "",
        minPrice: null,
        maxPrice: null
      });
    }
  }
};
</script>

<style scoped>
.search-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.search-input {
  width: 200px;
  min-width: 150px;
}

.search-button {
  white-space: nowrap;
}

.price-filter-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.price-input {
  width: 80px;
  min-width: 60px;
}

.price-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.price-separator {
  color: #909399;
  font-weight: bold;
  white-space: nowrap;
}

.clear-button {
  white-space: nowrap;
}

/* 简单的响应式设计 */
@media (max-width: 1200px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .search-section,
  .price-filter-section {
    width: 100%;
    justify-content: center;
  }
  
  .search-input {
    width: 100%;
    max-width: 300px;
  }
  
  .price-input {
    width: 80px;
  }
}

@media (max-width: 768px) {
  .search-container {
    padding: 15px;
  }
  
  .search-input {
    max-width: 250px;
  }
  
  .price-input {
    width: 70px;
  }
}
</style>
